import React, { Component } from "react";
import "./VideoShow.css";
import axios from "axios";
import qs from 'qs'; // 这个包可以对 url 进行解析, 生成对象  

export default class VideoShow extends Component {

    state = {
        douyin: {}
    }

    render() {
        return (
            <div className="container douyin-show">
                <button className="btn btn-danger" onClick={this.back}>返回</button>
                <h3 className="page-header">{this.state.douyin.desc}</h3>
                <div className="video">
                    <video
                        height="100%"
                        controls
                        src={this.state.douyin.video_local 
                            ? 'http://cdn.xiaohigh.com/' + this.state.douyin.video_local 
                            : ''
                        }
                    ></video>
                </div>
            </div>
        );
    }

    back = () => {
        //
        // this.props.history.goBack(); //回退
        // this.props.history.goForward(); //前进
        this.props.history.go(-1);// 前进  后退
    }

    //
    async componentDidMount() {
        //1. params 方式获取id
        // let id = this.props.match.params.id;
        // console.log(id);
        //2. query 方式获取 id
        // let res = qs.parse(this.props.location.search.slice(1)); //parse 解析
        // let id = res.id;
        //3. state 方式获取id
        // console.log(this.props);
        let id = this.props.location.state.id;
        console.log(window.history);
        //发送请求
        let result = await axios("http://api.xiaohigh.com/douyin/" + id);// 
        //设置状态
        this.setState({
            douyin: result.data
        })
        
    }
}
